<template>
  <div>
    <page-box>
      <template #top>
        <alert-msg
          content="如果设置多个时间，优先级为特殊工作时间>节假日>常规工作时间，例如在五一假期设置第一天为值班日；工作时间（常规工作+特殊工作）以外都属于非服务时间，包括节假日。"
        >
          <template #icon>
            <i class="MC_iconfont MC_icon-xinxi-mian"></i>
          </template>
        </alert-msg>
      </template>
      <template #search>
        <search-form :fieldList="STATE.fieldList" :form="STATE.form" @onSearchFun="searchFun"></search-form>
      </template>
      <template #btn>
        <el-button @click="onFetchData">查询</el-button>
        <el-button type="primary" @click="onAdd">新建</el-button>
      </template>
      <template #table>
        <resize-table
          :showPagination="true"
          :data="STATE.tableData"
          :pagingData="STATE.pagingData"
          :headers="STATE.headers"
          @onPageChange="handleCurrentChange"
          @onPageSizeChange="handleSizeChange"
        >
          <template #oprate="{ scope }">
            <span class="edit" @click="onEdit(scope.row)">编辑</span>
          </template>
        </resize-table>
      </template>
    </page-box>
    <add-service-time ref="AddServiceTime" @onRefresh="onFetchData"></add-service-time>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, reactive, onBeforeMount } from 'vue'
import pageBox from '@common/components/page-box.vue'
import searchForm from '@common/components/base-form/form.vue'
import resizeTable from '@common/components/resize-table/index.vue'
import alertMsg from '@common/components/alert/index.vue'
import addServiceTime from './add-time.vue'
import { queryServiceTime } from '@app/base/apis/service-time'
export default defineComponent({
  name: 'roleConfig',
  components: { searchForm, resizeTable, pageBox, alertMsg, addServiceTime },
  setup() {
    const INSTANCE: any = getCurrentInstance()
    const STATE = reactive({
      // 动态表单检索
      fieldList: [
        {
          name: '服务时间名称',
          field: 'name',
          type: 'text'
        }
      ],
      // 检索表单
      form: { name: '' },
      // 表格数据
      tableData: [],
      // 表头数据
      headers: [
        { label: '服务时间名称', prop: 'name', show: true },
        { label: '最后更新时间', prop: 'updateTime', show: true },
        { label: '操作', prop: 'oprate', show: true }
      ],
      // 分页数据
      pagingData: { page: 1, total: 2, limit: 10 }
    })

    const searchFun = () => {
      STATE.pagingData.page = 1
      onFetchData()
    }

    // 新建服务时间
    const onAdd = () => {
      INSTANCE?.refs.AddServiceTime.openDialog('add')
    }

    // 编辑服务时间
    const onEdit = (data: any) => {
      INSTANCE?.refs.AddServiceTime.openDialog('edit', data || {})
    }

    // 获取服务时间列表
    const onFetchData = () => {
      const sendData = {
        ...STATE.form,
        limit: STATE.pagingData.limit,
        page: STATE.pagingData.page
      }
      queryServiceTime(sendData).then((res: any) => {
        if (res.success && res.data) {
          STATE.tableData = res.data.list || []
          STATE.pagingData.total = res.data.count || 0
        }
      })
    }
    const handleCurrentChange = (page: number) => {
      STATE.pagingData.page = page
      onFetchData()
    }

    const handleSizeChange = (size: number) => {
      STATE.pagingData.limit = size
      onFetchData()
    }
    // 首次获取列表
    onBeforeMount(() => {
      onFetchData()
    })

    return { STATE, onEdit, onAdd, onFetchData, handleCurrentChange, handleSizeChange, searchFun }
  }
})
</script>

<style lang="stylus" scoped>
.edit {
  color: var(--mc-main-color);
  cursor: pointer;
}
</style>
